<template>
  <div>
    <el-button
      icon="el-icon-plus"
      size="small"
      style="margin-top:20px"
      @click="AddClick"
    >添加</el-button>
    <HkTable
      :table-data="tableDatas"
      :table-columns="tableList"
      :dict-list="dictList"
      :show-index="true"
      :operate="true"
      :is-need-index="true"
      :show-pag="false"
    >
      <template #operate="scope">
        <el-button
          size="mini"
          type="text"
          @click="handleDelete(scope.row)"
        >删除
        </el-button>
      </template>

      <template v-for="item in tableList" slot-scope="scope">
        <el-input v-if="item.type=='input'" v-model="scope.row.row[item.param]" />
        <el-select
          v-if="item.type == 'select'"
          v-model="scope.row.row[item.param]"
          :clearable="true"
          placeholder="请选择"
          :disabled="item.disabled"
          v-bind="item.attrs"
          style="width: 100%"
        >
          <el-option
            v-for="(el, index) in dictList"
            :key="index"
            :label="el.label"
            :value="el.value"
          />
        </el-select>
      </template>
    </HkTable>
  </div>
</template>

<script>
import HkTable from '../Hk-Table/index.vue'
export default {
  components: { HkTable },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableList: {
      type: Array,
      default: () => []
    },
    dictList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      key: 'value'
    }
  },
  computed: {
    tableDatas() {
      return this.tableData
    }
  },
  methods: {
    AddClick() {
      this.tableDatas.push({ isNew: true })
    },
    handleDelete(data) {
      this.tableDatas.splice(data.index, 1)
    },
    submitTable() {
      return new Promise((resolve, reject) => {
        resolve(this.tableDatas)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
